<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>User Chat Record List</title>
  </head>
  <body>
    <div id="usersmsgrid" style="height:280px;">
    </div>
    <script>
        /*
         * Ext JS Library 2.1
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
        var smsRecordDS;
        Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // fix the bug in codepress - resize
            //Ext.BoxComponent.prototype.setSize('100%', '125px');
            /************************************************************
             * Display the result in page
             * the column model has information about grid columns
             * dataIndex maps the column to the specific data field in
             * the data store (created below)
             ************************************************************/
            var smsRecordCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    hidden: true
                }, {
                    header: "接收人",
                    width: 80,
                    dataIndex: 'phone_number'
                }, {
                    header: "内容",
                    width: 600,
                    dataIndex: 'content'
                }, {
                    header: "时间",
                    width: 60,
                    dataIndex: 'created_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            smsRecordDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/users/getSMSRecordList?user_id=' + '<%=@user_id%>'
                }),
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'phone_number'
                    }, {
                        name: 'content'
                    }, {
                        name: 'created_at'
                    }])
            });
                
                
            /************************************************************
             * define grid panel now
             ************************************************************/
            var usersmsgridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'usersmsgrid',
                ds: smsRecordDS,
                cm: smsRecordCM,
                autoWidth: true,
                viewConfig: {
                    forceFit: true
                },
                loadMask: true,
                iconCls: 'icon-grid',
                collapsible: true,
                animCollapse: false,
                autoWidth: true,
                //frame: true,
                title: '短信记录列表'
            });
            //panel render
            usersmsgridPanel.render();
            // trigger the data store load
            smsRecordDS.load();
        });
    </script>
  </body>
</html>
